var clientApi = {
    isListShow:false,
    editor:null
}

//处理json数据
function getOneByForm() {
    var url = $("#url_input").val();
    var body = $("#body_input").val();
    var type = $("#type_select").val();
    var headers = $("#header_input").val();

    $.ajax({
        url: url,//请求地址
        // data: {id: 3},//提交的数据
        data: body.toString(),//提交的数据
        contentType: "application/x-www-form-urlencoded; charset=UTF-8;",
        type: type,//提交的方式
        dataType: "TEXT", //返回类型 TEXT：字符串 JSON XML
        headers: {headers},
        success: function (data) { // 校验返回内容，进行跳转
            //将获取到的数据输出到元素上
            $("#showArea").text(data);
            console.log(data);
        },
        error: function (xhr) {
            clearShowArea();
            // 失败输出HTTP状态码
            alert("调用失败！HTTP状态码：" + xhr.status);
        }
    })
}

// 地址操作 localStorage
function getUrlList(){
    return localStorage.getItem("ApiList")
}
function setUrlList(list){
    localStorage.setItem("ApiList", list)
}
function removeUrlList(){
    localStorage.removeItem("ApiList")
}
function saveUrl(url){
    var apiList = JSON.parse(getUrlList()) || {};
    if(!apiList.urlArr){
        apiList.urlArr = []
    }
    if(apiList.urlArr.indexOf(url) < 0){
        apiList.urlArr.push(url)
    }
    setUrlList(JSON.stringify(apiList))
}

function createUrlList(){
    $("body").append(`
        <div class = 'urlListDialog'>
            <span class='glyphicon glyphicon-trash tool-button remove-button'
                title = '清空列表'
                aria-hidden='true'></span>
            <div class = "list"></div>
        </div>
    `)
    $(".remove-button").mousedown(function(){
        removeUrlList()
    })
}

function showUrlList(){
    $(".urlListDialog").show()
    $(".urlListDialog .list").empty()
    var apiList = JSON.parse(getUrlList()) || {};
    if(!apiList.urlArr){
        apiList.urlArr = []
    }
    var liStr = '';
    for(var i = 0; i < apiList.urlArr.length; i++){
        liStr+="<li>"+apiList.urlArr[i]+"</li>";
    }
    $(".urlListDialog .list").append(`
        <ul>${liStr}</ul>
    `)

    $(".urlListDialog li").mousedown(function(e){
        var _li = $(e.target)
        $("#url_input").val(_li.text())
    })
}

function hideUrlList(){
    $(".urlListDialog").hide()
}

function getOneByJson() {
    var url = $("#url_input").val();
    var body = clientApi.editor.get();//JSON.parse($("#body_input").val());
    var type = $("#type_select").val();
    var headers = $("#header_input").val();
    
    // removeUrlList()
    if(type == 'POST'){
        $.post(url, body, function(data){
            $("#showArea").text(JSON.stringify(data));
            saveUrl(url)
            console.log(data);
        }).error(function(data) { 
            $("#showArea").text(JSON.stringify(data));
        })
    }else if(type == 'GET'){
        $.get(url, body, function(data){
            $("#showArea").text(JSON.stringify(data));
            saveUrl(url)
            console.log(data);
        }).error(function(data) { 
            $("#showArea").text(JSON.stringify(data));
        })
    }else{
        $.ajax({
            url: url,//请求地址
            data: body,//提交的数据
            contentType: "application/json; charset=utf-8",
            headers: {headers},
            type: type.split('-')[0],//提交的方式
            dataType: "json", //返回类型 TEXT：字符串 JSON XML
            success: function (data) { // 校验返回内容，进行跳转
                //将获取到的数据输出到元素上
                $("#showArea").text(JSON.stringify(data));
                console.log(data);
                saveUrl(url)
            },
            error: function (xhr) {
                clearShowArea();
                // 失败输出HTTP状态码
                console.log(xhr)
                alert("调用失败！HTTP状态码：" + xhr.status);
            }
        })
    }
}

//  清空结果
function clearShowArea() {
    $("#showArea").empty();
    // jsoneditor 为{}
    clientApi.editor.set({})
}

// 发送请求方法入口，判断数据类型分别调用对应方法
function send() {
    var bodyType = $('input:radio[name=bodyType]:checked').val();
    // console.log("bodyType: " + bodyType)
    if (bodyType == "form") {
        getOneByForm();
    } else if (bodyType == "json") {
        getOneByJson();
    } else {
        alert("不支持该类型：" + bodyType)
    }
}

function jsonToFormData(json) {
    var object = JSON.parse(body);
    var rs = "";
    object.key(obj).forEach()
    {
        rs = {}
    }
}

// 跳转首页
function toIndex() {
    window.location.href = '/';
}

// 初始化操作
function init(){
    createUrlList()
    $("#url_input").on('mousedown',function(){
        if(clientApi.isListShow){
            hideUrlList()
            clientApi.isListShow = false;
        }else{
            if(getUrlList()){
                showUrlList()
                clientApi.isListShow = true;
            }
        }
    })
    $("#url_input").on('blur',function(){
        if(clientApi.isListShow){
            hideUrlList()
            clientApi.isListShow = false;
        }
        return true;
    })
    // json编辑器
    var container = document.getElementById("jsoneditor")
    var options = {
        mode: 'code',
        modes: ['code', 'text', 'tree', 'preview']
    }
    clientApi.editor = new JSONEditor(container, options)
    clientApi.editor.set({})
}

$(function(){
    init()
})